<template>
  <div class="task-manage">
    <!-- 顶部操作区 -->
    <div class="operation-bar">
      <el-input
        v-model="filters.taskName"
        placeholder="任务名称"
        style="width: 200px; margin-right: 10px;"
        clearable
      />
      <el-select v-model="filters.difficulty" placeholder="难易程度" style="width: 120px; margin-right: 10px;">
        <el-option label="全部" value="" />
        <el-option label="简单" value="简单" />
        <el-option label="中等" value="中等" />
        <el-option label="困难" value="困难" />
      </el-select>
      <el-select v-model="filters.langName" placeholder="所属语言" style="width: 120px; margin-right: 10px;">
        <el-option label="全部" value="" />
        <el-option
          v-for="item in langOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="filters.moduleName" placeholder="所属模块" style="width: 120px; margin-right: 10px;">
        <el-option label="全部" value="" />
        <el-option
          v-for="item in moduleOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="handleFilter">筛选</el-button>
      
    </div>
    <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>添加任务
    </el-button>

    <!-- 表格区域 -->
    <el-table 
      :data="tableData" 
      style="width: 100%"
      :height="600"
      border>
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="taskName" label="任务名称"/>
      <el-table-column prop="duration" label="任务时长" width="120">
        <template #default="scope">
          {{ scope.row.duration }} {{ scope.row.unit }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难易程度" width="100">
        <template #default="scope">
          <el-tag :type="getDifficultyType(scope.row.difficulty)">
            {{ scope.row.difficulty }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="langName" label="所属语言" width="150" />
      <el-table-column prop="moduleName" label="所属模块" width="150" />
      <el-table-column prop="creator" label="创建者" width="120" />
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column label="操作" fixed="right" width="150">
        <template #default="scope">
          <el-button 
            type="primary" 
            :icon="Edit"
            circle
            @click="handleEdit(scope.row)"
            title="编辑"
          />
          <el-button 
            type="danger" 
            :icon="Delete"
            circle
            @click="handleDelete(scope.row)"
            title="删除"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '添加任务' : '编辑任务'"
      width="800px"
    >
      <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
        <el-form-item label="任务名称" prop="taskName">
          <el-input 
            v-model="form.taskName" 
            type="textarea"
            :rows="5"
            placeholder="请输入任务名称"
            :maxlength="3000"
            show-word-limit
          />
        </el-form-item>
        
        <el-form-item label="难易程度" prop="difficulty">
          <el-select v-model="form.difficulty" placeholder="请选择难易程度" style="width: 100%">
            <el-option label="简单" value="简单" />
            <el-option label="中等" value="中等" />
            <el-option label="困难" value="困难" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属语言" prop="langName">
          <el-select v-model="form.langName" placeholder="请选择所属语言" style="width: 100%">
            <el-option
              v-for="item in langOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属模块" prop="moduleName">
          <el-select v-model="form.moduleName" placeholder="请选择所属模块" style="width: 100%">
            <el-option
              v-for="item in moduleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务时长" prop="duration">
          <el-input-number v-model="form.duration" placeholder="请输入时长" />
          <el-select v-model="form.unit" placeholder="选择单位" style="width: 100px; margin-left: 10px;">
            <el-option label="分钟" value="分钟" />
            <el-option label="小时" value="小时" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit(formRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Edit, Delete, Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';


const filters = ref({
  taskName: '',
  difficulty: '',
  langName: '',
  moduleName: ''
});

// 表单校验规则
const rules = {
  taskName: [
    { required: true, message: '请输入任务名称', trigger: 'blur' },
    { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
  ],
  difficulty: [
    { required: true, message: '请选择难易程度', trigger: 'change' }
  ],
  duration: [
    { required: true, message: '请输入任务时长', trigger: 'blur' }
  ],
  moduleName: [
    { required: true, message: '请选择所属模块', trigger: 'change' }
  ]
};

// 语言选项
const langOptions = [
  { value: '1', label: 'Python' },
  { value: '2', label: 'Java' },
  { value: '3', label: 'MySQL' }
];

// 模块选项
const moduleOptions = [
  { value: '1', label: 'Java基础' },
  { value: '2', label: 'Web基础' },
  { value: '3', label: '数据库' }
];

// 获取难易程度标签类型
const getDifficultyType = (difficulty) => {
  switch (difficulty) {
    case '简单':
      return 'success';
    case '中等':
      return 'warning';
    case '困难':
      return 'danger';
    default:
      return 'info';
  }
};

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 对话框相关
const dialogVisible = ref(false);
const dialogType = ref('add');
const formRef = ref(null);
const form = ref({
  taskName: '',
  difficulty: '',
  duration: null,
  unit: '分钟', // Default unit
  langName: '',
  moduleName: ''
});

// 模拟数据
const tableData = ref([
  {
    id: 1,
    taskName: 'Java基础语法练习',
    difficulty: '简单',
    duration: 30,
    unit: '分钟',
    langName: 'Java',
    moduleName: 'Java基础',
    creator: '管理员',
    createTime: '2024-01-01 10:00:00'
  },
  {
    id: 2,
    taskName: 'Web页面开发实战',
    difficulty: '中等',
    duration: 2,
    unit: '小时',
    langName: 'Java',
    moduleName: 'Web基础',
    creator: '管理员',
    createTime: '2024-01-02 14:30:00'
  }
]);

// 计算总数
total.value = tableData.value.length;

// 添加任务
const handleAdd = () => {
  dialogType.value = 'add';
  form.value = {
    taskName: '',
    difficulty: '',
    duration: null,
    unit: '分钟', // Reset unit
    langName: '',
    moduleName: ''
  };
  dialogVisible.value = true;
};

// 编辑任务
const handleEdit = (row) => {
  dialogType.value = 'edit';
  form.value = { ...row };
  dialogVisible.value = true;
};

// 删除任务
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定要删除该任务吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const index = tableData.value.findIndex(item => item.id === row.id);
      if (index !== -1) {
        tableData.value.splice(index, 1);
      }
      ElMessage.success('删除成功');
    })
    .catch(() => {
      ElMessage.info('已取消删除');
    });
};

// 提交表单
const handleSubmit = async (formEl) => {
  if (!formEl) return;
  
  await formEl.validate((valid) => {
    if (valid) {
      if (dialogType.value === 'add') {
        // 添加逻辑
        const newTask = {
          id: tableData.value.length + 1,
          ...form.value,
          creator: '当前用户',
          createTime: new Date().toLocaleString()
        };
        tableData.value.push(newTask);
        ElMessage.success('添加成功');
      } else {
        // 编辑逻辑
        const index = tableData.value.findIndex(item => item.id === form.value.id);
        if (index !== -1) {
          tableData.value[index] = { ...form.value };
        }
        ElMessage.success('修改成功');
      }
      dialogVisible.value = false;
    }
  });
};
</script>

<style scoped>
.task-manage {
  padding: 20px;
}

.operation-bar {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-button {
  margin-right: 10px;
}

:deep(.el-table) {
  margin-top: 20px;
}

:deep(.el-dialog__body) {
  padding: 20px;
}
</style>
